<template>
  <div class="content">
    <div class="main">
      <div class="mainrow1">
        <div class="col1">
          <div class="chats box-card" style="position: relative;">
            <div style="position:absolute;width;100%;padding: 0 1.25rem;height:height: 3.75rem;line-height:3.75rem;width:100%;">
              <div
                style="display: flex;justify-content: space-between;width: 100%;height: 100%;align-items: center;">
                <div style="display:flex;align-items: center;">
                  <img src="@/assets/images/chrts.png" style="margin-right:7px;" alt>
                  <span style="margin-right:7px;">高发缺陷类型TOP10</span>
                </div>
                <el-switch v-model="switch1" style="display: block;padding: 0 0 0 1.25rem;z-index:999999;margin-right:22%;" inactive-text="数据展示" />
              </div>
            </div>
            <div ref="charts1" class="cardMain cardMainCharts1" />
            <!-- <el-card class="box-card">
              <div
                slot="header"
                style="display: flex;justify-content: space-between;width: 100%;height: 100%;align-items: center;">
                <div style="display:flex;align-items: center">
                  <img src="@/assets/images/chrts.png" style="margin-right:7px;" alt>
                  <span style="margin-right:7px;">高发缺陷类型TOP10</span>
                </div>
                <el-switch v-model="switch1" style="display: block" inactive-text="数据展示" />
              </div>
            </el-card> -->
          </div>
          <!-- <div class="lend"></div> -->
        </div>
        <div class="col2">
          <el-card class="box-card">
            <div
              slot="header"
              style="display: flex;justify-content: space-between;width: 100%;height: 100%;align-items: center;">
              <div style="display:flex;align-items: center">
                <img src="@/assets/images/userInspetionCharts.png" style="margin-right:7px;" alt>
                <span style="margin-right:7px;">缺陷单位分布</span>
              </div>
            </div>
            <div ref="charts2" class="cardMain" />
          </el-card>
        </div>
      </div>
      <div class="mainrow2">
        <el-card class="box-card">
          <div
            slot="header"
            style="display: flex;justify-content: space-between;width: 100%;height: 100%;align-items: center;">
            <div style="display:flex;align-items: center">
              <img src="@/assets/images/userInspetionCharts.png" style="margin-right:7px;" alt>
              <span style="margin-right:7px;">缺陷线路分布</span>
            </div>
            <div style="display: flex">
              <el-select
                v-model="cType"
                :popper-append-to-body="false"
                popper-class="select"
                placeholder="请选择6C类型">
                <el-option
                  v-for="item in cTypeList"
                  :key="item.itemValue"
                  :label="item.itemName"
                  :value="item.itemValue" />
              </el-select>
            </div>
          </div>
          <div ref="charts3" class="cardMain" />
        </el-card>
      </div>
    </div>
  </div>
</template>
<script>
import { getDefectTypeTop10, getSectionStatistics, getLineStatistics } from '@/api/cms/Analysis-management/synthetical-Analysis/comprehensiveAnalyseIndex'
import { getListByTypeCode } from '@/api/cms/basic'
import echarts from 'echarts'
export default {
  data() {
    return {
      tableData1: [],
      tableData2: [],
      tableData3: [],
      cTypeList: [],
      cType: '',
      tableData1Total: '',
      switch1: true
    }
  },
  watch: {
    switch1(ov) {
      this.getcharts1(ov)
    },
    cType() {
      this.getLineStatistics()
    }
  },
  mounted() {
    this.getData()
    this.getLineStatistics()
  },
  deactivated() {
    this.lookDialog.visible = false
  },
  methods: {
    getData() {
      getListByTypeCode({ typeCode: 'JCJCTYPE' }).then(response => {
        this.cTypeList = Object.freeze(response.data)
      })
      getDefectTypeTop10({}).then(res => {
        this.tableData1 = res.data.data
        this.tableData1Total = res.data.total
        this.getcharts1(this.switch1)
      })
      getSectionStatistics({}).then(res => {
        this.tableData2 = res.data
        this.getcharts2()
      })
    },
    getLineStatistics() {
      getLineStatistics({
        cType: this.cType
      }).then(res => {
        this.tableData3 = res.data
        this.getcharts3()
      })
    },
    getcharts1(switch1) {
      const myChart = echarts.init(this.$refs.charts1)
      const titless = this.tableData1Total
      const option = {
        title: {
          text: titless, // 图形标题，配置在中间对应效果图的80%
          left: '38%',
          top: '42%',
          textStyle: {
            color: '#616266',
            fontSize: 30,
            align: 'center'
          },
          subtext: 'TOP10缺陷总数',
          subtextStyle: {
            // 副标题的属性
            color: '#616266',
            fontSize: 14
            // 同主标题
          },
          textAlign: 'center'
        },
        tooltip: {
          trigger: 'item'
        },
        legend: {
          type: 'scroll',
          top: '5%',
          right: '0',
          bottom: '2%',
          icon: 'circle',
          itemWidth: 10, // 设置宽度
          itemHeight: 10, // 设置高度
          orient: 'vertical',
          itemGap: 30,
          borderColor: '#fefefe', // 边框颜色
          borderWidth: 1, // 边框线宽
          shadowColor: '#999', // 阴影颜色
          shadowOffsetX: -5, // 阴影水平方向上的偏移距离
          shadowOffsetY: 5, // 阴影垂直方向上的偏移距离
          shadowBlur: 10 // 阴影的模糊大小
        },
        color: ['#4055D8', '#578DEF', '#73B4F3', '#9ED2FD', '#7AD1D1', '#90CE4C', '#69A728', '#F6EFBE', '#D4E457', '#F0E249'],
        series: [
          {
            type: 'pie',
            radius: ['38%', '52%'],
            center: ['38%', '50%'],
            avoidLabelOverlap: true,
            labelLine: {
              length: 15,
              length2: 0,
              maxSurfaceAngle: 80,
              show: switch1
            },
            label: {
              show: switch1,
              alignTo: 'edge',
              minMargin: 5,
              edgeDistance: 10,
              lineHeight: 15,
              rich: {
                time: {
                  fontSize: 10,
                  color: '#999'
                }
              },
              normal: {
                show: switch1,
                formatter: function(params) {
                  return `${params.data.name}\n(${params.data.proportion})`
                }

              }
            },
            labelLayout: function(params) {
              const isLeft = params.labelRect.x < myChart.getWidth() / 2
              const points = params.labelLinePoints
              // Update the end point.
              points[2][0] = isLeft
                ? params.labelRect.x
                : params.labelRect.x + params.labelRect.width
              return {
                labelLinePoints: points
              }
            },
            data: this.tableData1
          }
        ]
      }
      myChart.setOption(option)
    },
    // 计算最大值
    calMax(arr) {
      let max = 0
      arr.forEach((el) => {
        el.forEach((el1) => {
          if (!(el1 === undefined || el1 === '')) {
            if (max < el1) {
              max = el1
            }
          }
        })
      })
      const maxint = Math.ceil(max / 9.5)// 不让最高的值超过最上面的刻度
      const maxval = maxint * 10// 让显示的刻度是整数
      return maxval
    },
    // 计算最小值
    calMin(arr) {
      let min = 0
      arr.forEach((el) => {
        el.forEach((el1) => {
          if (!(el1 === undefined || el1 === '')) {
            if (min > el1) {
              min = el1
            }
          }
        })
      })
      const minint = Math.floor(min / 10)
      const minval = minint * 10// 让显示的刻度是整数
      return minval
    },
    getcharts2() {
      const myChart = echarts.init(this.$refs.charts2)
      const tableData = this.tableData2
      const option = {
        color: ['#A3EDBD', '#95D3FD', '#688DFC', '#69A728', '#7AD1D1', '#F6EFBE', '#D4E457', '#F0E249'],
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          },
          formatter: function(params) {
            var index = params[0].dataIndex
            return tableData.sectionNameList[index] + '</br>' +
              '缺陷总数: ' + tableData.totalList[index] + '</br>' +
              '一级缺陷: ' + tableData.oneLevelNumList[index] + '</br>' +
              '二级缺陷: ' + tableData.twoLevelNumList[index] + '</br>' +
              '未销号: ' + tableData.undealedList[index] + '</br>' +
              '处理率: ' + tableData.rateList[index] + '%' + '</br>'
          }
        },
        legend: {
          x: 'right',
          y: 'top'
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            data: this.tableData2.sectionNameList
          }
        ],
        yAxis: [
          {
            type: 'value',
            axisTick: {
              show: false
            },
            min: 0,
            max: 100000,
            splitNumber: 5
          },
          {
            type: 'value',
            axisLabel: {
              formatter: '{value} %'
            },
            axisTick: {
              show: false
            },
            min: 0,
            max: 100,
            splitNumber: 5
          }
        ],
        series: [
          {
            name: '未销号',
            barWidth: 30,
            type: 'bar',
            emphasis: {
              focus: 'series'
            },
            data: this.tableData2.undealedList
          },
          {
            name: '一级缺陷',
            type: 'bar',
            barWidth: 30,
            stack: 'Ad',
            emphasis: {
              focus: 'series'
            },
            data: this.tableData2.oneLevelNumList
          },
          {
            name: '二级缺陷',
            type: 'bar',
            barWidth: 30,
            stack: 'Ad',
            emphasis: {
              focus: 'series'
            },
            data: this.tableData2.twoLevelNumList
          },
          {
            name: '处理率',
            type: 'line',
            yAxisIndex: 1,
            data: this.tableData2.rateList
          }
        ]
      }
      myChart.clear()
      myChart.setOption(option)
    },
    getcharts3() {
      const myChart = echarts.init(this.$refs.charts3)
      const tableData3s = this.tableData3
      const option = {
        color: ['#A3EDBD', '#95D3FD', '#688DFC', '#69A728', '#7AD1D1', '#F6EFBE', '#D4E457', '#F0E249'],
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          },
          formatter: function(params) {
            var index = params[0].dataIndex
            return tableData3s.sectionNameList[index] + '</br>' +
                    '缺陷总数: ' + tableData3s.totalList[index] + '</br>' +
                    '一级缺陷: ' + tableData3s.oneLevelNumList[index] + '</br>' +
                    '二级缺陷: ' + tableData3s.twoLevelNumList[index] + '</br>' +
                    '未销号: ' + tableData3s.undealedList[index] + '</br>' +
                    '处理率: ' + tableData3s.rateList[index] + '%' + '</br>'
          }
        },
        legend: {
          x: 'right',
          y: 'top'
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            data: this.tableData3.sectionNameList
          }
        ],
        yAxis: [
          {
            type: 'value'

          },
          {
            type: 'value',
            axisLabel: {
              formatter: '{value} %'
            }
          }
        ],
        series: [
          {
            name: '未销号',
            barWidth: 30,
            type: 'bar',
            emphasis: {
              focus: 'series'
            },
            data: this.tableData3.undealedList
          },
          {
            name: '一级缺陷',
            type: 'bar',
            barWidth: 30,
            stack: 'Ad',
            emphasis: {
              focus: 'series'
            },
            data: this.tableData3.oneLevelNumList
          },
          {
            name: '二级缺陷',
            type: 'bar',
            barWidth: 30,
            stack: 'Ad',
            emphasis: {
              focus: 'series'
            },
            data: this.tableData3.twoLevelNumList
          },
          {
            name: '处理率',
            type: 'line',
            yAxisIndex: 1,
            data: this.tableData3.rateList
          }
        ]
      }
      myChart.clear()
      myChart.setOption(option)
    }
  }
}
</script>
<style lang="scss" scoped>
  .content {
    width: 100%;
    height: 100%;
    background: #f1f4fb;
    padding: 0 20px;
  }
  .main {
    width: 100%;
    height: 100%;
    display: flex;
    padding-bottom: 20px;
    flex-direction: column;
    justify-content: space-between;
  }
  .mainrow1{
    width:100%;
    height:51.2%;
    display: flex;
    justify-content: space-between;
    .col1{width:39.5%;height:100%;display:flex;}
    .col2{width:59.5%;height:100%;}
  }
  .mainrow2{
    width:100%;
    height:47%;
  }
  .form-top-p {
    margin-right: 12px;
    height: 30px;
  }
  /deep/.el-input--medium .el-input__inner {
    height: 30px;
    line-height: 30px;
  }
  /deep/.el-range-editor--medium.el-input__inner {
    height: 30px;
    line-height: 30px;
  }
  /deep/.box-card {
    width: 100%;
    height: 100%;
    margin: 0 !important;
    float: none;
    background: #ffffff;
    box-shadow: 0px 0px 10px 5px rgba(0, 47, 138, 0.04);
    border-radius: 6px;
    border: 0;
  }
  .clearfix {
    height: 100%;
    width: 100%;
    display: flex;
    align-items: center;
  }
  /deep/.el-card__header {
    padding: 0;
    height: 60px;
    padding: 0 20px;
    border: 0;
    background-color: #fff !important
  }
  .clearfix span {
    font-weight: 350;
    font-size: 18px;
    color: #061b48;
  }
  .clearfix img {
    width: 20px;
    height: 20px;
    margin-right: 7px;
  }
  .cardMain {
    width: 100%;
    height: 100%;
  }
  // .cardMainCharts1{
  //   margin: 4rem 0 0;
  // }
  /deep/.el-card__body {
    padding: 0;
    width: 100%;
    height: calc(100% - 60px);
    border: 0;
  }
  .lend {
    width: 155px;

    background: #ffffff;
    box-shadow: -5px 0px 10px rgba(0, 47, 138, 0.07);
    border-radius: 0 6px 6px 0;
  }
  .chats {
    width: 100%;
    background: #ffffff;
    box-shadow: 0px 0px 10px 5px rgba(0, 47, 138, 0.04);
    border-radius: 6px;
    height: 100%;
  }
  .chats /deep/.box-card {
    border-radius: 0;
  }
  /deep/.el-switch__label.is-active {
    color: #303133;
  }
</style>
